import React, { useState } from 'react'
import "./index.css"
export default function Item({ todo, done, id, setTodoList, todoList }) {


  const [isActive, setIsActive] = useState(false)

  //鼠标移入移出的事件函数
  const mouseHandle = (bool) => {
    //外层函数用来接收参数,返回的函数是真正的事件函数   
    return () => {
      setIsActive(bool)
    }
  }

  //多选框触发改变的事件函数
  const checkChangeHandle = (e) => {
    const newTodo = todoList.map(item => {
      if (item.id === id) {
        item.done = e.target.checked
      }
      return item
    })
    setTodoList(newTodo)
  }


  // 删除事件的回调函数.
  // 我们需要把原来的数据删除得到一个删除后的数据,然后再把它放回去
  // 那么我们需要判断哪一个是我们需要删除的那个,并把它删除,用到数组的过滤方法filter
  // filter过滤后返回一个新的数组
  const deleteHandle = () => {
    const newItem = todoList.filter(item => {
      // 如果当前我点击的数据id和元数据的id一致,就执行删除,不一致就不执行
      // if(item.id===id){
      //   return true
      // }else{
      //   return false
      // }
      // 简化写法
      return item.id !== id
    })
    setTodoList(newItem)
  }

  return (
    <li onMouseEnter={mouseHandle(true)} onMouseLeave={mouseHandle(false)} className={isActive ? "active" : ""}>
      <label>
        <input type="checkbox" checked={done} onChange={checkChangeHandle} />
        <span>{todo}</span>
      </label>
      <button onClick={deleteHandle} className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
    </li>
  )
}
